<template>
  <div class="Integrated_Monitoring_FWPZ">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
        >
          <el-row style="margin-top: 10px">
            <el-col :span="24">
              <el-input
                size="small"
                style="width: 20%; display: inline-block; margin-left: 10px"
                v-model="input_search"
              ></el-input>
              <el-button
                size="small"
                style="margin-left: 5px"
                icon="el-icon-search"
                @click="(pages.page = 1), getTable_data()"
              ></el-button>
              <el-button size="small" style="margin-left: 10px" @click="open"
                >新建</el-button
              >
              <el-button size="small" style="margin-left: 10px" @click="del_s"
                >批量删除</el-button
              >
            </el-col>
          </el-row>
          <el-table
            :data="tableData"
            style="width: 100%; margin-top: 15px"
            height="600px"
            v-loading="table_loading"
            @selection-change="selection_change"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              type="index"
              :index="
                (index) => {
                  return pages.limit * (pages.page - 1) + index + 1;
                }
              "
              label="序号"
              width="55"
            >
            </el-table-column>
            <el-table-column prop="_collectip" label="采集端IP">
            </el-table-column>
            <el-table-column prop="_collectname" label="采集对象名称">
            </el-table-column>
            <el-table-column prop="_queueip" label="队列服务IP">
            </el-table-column>
            <el-table-column prop="_queuechannel" label="队列通道">
            </el-table-column>
            <el-table-column prop="_queuemanagename" label="队列管理器名称">
            </el-table-column>
            <el-table-column prop="_collectstatus" label="采集状态">
            </el-table-column>
            <el-table-column prop="_status" label="状态" v-if="false">
              <template slot-scope="scope">
                <el-switch
                  disabled
                  v-if="scope.row._status != -1"
                  v-model="scope.row._status"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
                <span v-if="scope.row._status == -1" style="color: red"
                  >已删除</span
                >
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="edit(scope.row)"
                  icon="el-icon-edit"
                  size="mini"
                ></el-button>
                <el-button
                  @click="del(scope.row)"
                  size="mini"
                  icon="el-icon-delete"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="block" style="text-align: center; margin-top: 10px">
            <el-pagination
              layout="prev, pager, next"
              :total="pages.total"
              :page-size="pages.limit"
              :current-page="pages.page"
              @current-change="page_change"
            >
            </el-pagination>
          </div>
          <!-- 弹层 -->
          <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="45%"
            :before-close="handleClose"
            :close-on-click-modal="false"
            :append-to-body="true"
          >
            <el-form
              label-position="right"
              label-width="140px"
              :model="formLabelAlign"
            >
              <el-form-item
                label="采集端IP"
                style="width: 50%; display: inline-block"
              >
                <el-input
                  v-model="formLabelAlign._collectip"
                  size="small"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="采集对象名称"
                style="width: 50%; display: inline-block"
              >
                <el-input
                  v-model="formLabelAlign._collectname"
                  size="small"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="队列服务IP"
                style="width: 50%; display: inline-block"
              >
                <el-input
                  v-model="formLabelAlign._queueip"
                  size="small"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="队列通道"
                style="width: 50%; display: inline-block"
              >
                <el-input
                  v-model="formLabelAlign._queuechannel"
                  size="small"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="队列管理器名称"
                style="width: 50%; display: inline-block"
              >
                <el-input
                  v-model="formLabelAlign._queuemanagename"
                  size="small"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="采集状态"
                style="width: 50%; display: inline-block"
              >
                <el-input
                  v-model="formLabelAlign._collectstatus"
                  size="small"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="状态"
                v-if="false"
                style="width: 50%; display: inline-block"
              >
                <el-switch
                  v-if="formLabelAlign._status != -1"
                  v-model="formLabelAlign._status"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
                <span v-if="formLabelAlign._status == -1" style="color: red"
                  >已删除</span
                >
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="btn_OK">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      value1: "",
      tableData: [],
      input_search: "", //输入框数据
      pages: {
        page: 1,
        limit: 15,
        total: 1,
      },
      dialogVisible: false,
      formLabelAlign: {},
      title: "",
      table_loading: false, // 表格loading
      selection: [], //复选框数据
    };
  },
  methods: {
    getTable_data() {
      this.table_loading = true;
      this.$post(
        "/Monitor/Settings/ServiceList?keyword=" +
          this.input_search +
          "&page=" +
          this.pages.page +
          "&limit=" +
          this.pages.limit
      ).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.pages.total = res.data.TotalCount;
          this.table_loading = false;
        }
      });
    },
    page_change(val) {
      // 页码切换事件
      this.pages.page = val;
      this.getTable_data();
    },
    open() {
      //新增按钮
      this.title = "新增";
      this.dialogVisible = true;
    },
    handleClose() {
      // 弹层关闭
      this.formLabelAlign = {};
      this.dialogVisible = false;
    },
    btn_OK() {
      var body = this.formLabelAlign;
      var url = this.formLabelAlign._id
        ? "/Monitor/Settings/ServiceUpdate"
        : "/Monitor/Settings/ServiceCreate";
      this.$post(url, body).then((res) => {
        if (res.code == 0) {
          this.handleClose();
          this.getTable_data();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      });
    },
    edit(val) {
      this.title = "修改";
      var info = JSON.stringify(val);
      this.formLabelAlign = JSON.parse(info);
      this.dialogVisible = true;
    },
    del(val) {
      let body = {
        Ids: [],
      };
      body.Ids = [];
      body.Ids.push(val._id);
      this.$confirm("确定删除？", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$post("/Monitor/Settings/ServiceDelete", body).then((res) => {
            if (res.code == 0) {
              this.getTable_data();
              this.$message({
                message: "操作成功",
                type: "success",
              });
            }
          });
        })
        .catch(() => {});
    },
    del_s() {
      let body = {
        Ids: this.selection,
      };
      this.$confirm("确定删除？", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$post("/Monitor/Settings/ServiceDelete", body).then((res) => {
            if (res.code == 0) {
              this.getTable_data();
              this.$message({
                message: "操作成功",
                type: "success",
              });
            }
          });
        })
        .catch(() => {});
    },
    selection_change(selection) {
      this.selection = [];
      console.log(selection);
      for (var i in selection) {
        this.selection.push(selection[i]._id);
      }
      console.log(this.selection);
    },
  },
  mounted() {
    // document.getElementById("2").focus();
    this.getTable_data();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
  },
};
</script>
<style lang="scss">
.Integrated_Monitoring_FWPZ {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
}
</style>
